<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="js/jq.js"></script>
    <script src="js/ajaxGo.js"></script>


    <!-- 引入样式 -->
    <link rel="stylesheet" href="css/elementui.css">
    <script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    <!-- 引入组件库 -->
    <script src="js/elementui.js"></script>


    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


    <!-- 时间选择器样式表 -->
    <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"
          rel="stylesheet">


    <!-- jquery -->
    <script src="js/jq.js"></script>

    <!-- bootstrap脚本 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- 时间选择器前置脚本 -->
    <script src="https://cdn.bootcss.com/moment.js/2.22.1/moment-with-locales.min.js"></script>

    <!-- 时间选择器核心脚本 -->
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js">
    </script>


</head>
<body>
<style>
    .is-selected {
        color: #1989FA;
    }

    .pm {
        padding: 0px;
        margin: 0px;
    }

    @import url("//unpkg.com/element-ui@2.15.7/lib/theme-chalk/index.css");

    .el-header {
        background-color: #B3C0D1;
        margin-left: 17px;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }

    .shortselect {
        background: #fafdfe;
        height: 30px;
        width: 80px;
        line-height: 28px;
        border: 1px solid #9bc0dd;
        -moz-border-radius: 2px;
        -webkit-border-radius: 2px;
        border-radius: 2px;
    }


    .button1 {
        height: 30px;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;

        text-align: center;
        background-color: white;
        color: black;
        border: 2px solid #4CAF50;
        border-radius: 5px;
    }

    .button1:hover {
        background-color: #4CAF50;
        color: white;
    }
    .pag_But{
        border: none;
        width: 65px;
        height: 28px;
        border-radius: 3px;
    }
</style>

<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>导航</template>
                    <el-menu-item-group>

                        <el-menu-item index="1-1">就叫查询吧</el-menu-item>

                    </el-menu-item-group>


                </el-submenu>


            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>



                <span id="admin_name"></span>

            </el-header>
            <div id="time" class="pm">
                <el-main style="overflow:visible">


                    <div class="container pm">
                        <div class="row">

                            <div class="col-lg-2 pm">
											<span>
												教师：<select name="teacher" id="teacher" change="aa()">
                                                <option selected="selected" value="-1">全部</option>

                                            </select>
                                               </span>
                            </div>


                            <div class="col-lg-2 pm"><span>
												班级：<select id="classes" name="classes">
                                <option selected="selected" value="-1">全部</option>

                            </select>
											</span></div>

                            <div class="col-lg-5 pm">
                                <div class="col-lg-6 pm">
                                    日期：<input class="col-8" type="text" onblur="aa()" id="startDate" name="startDate"
                                              value=""/>
                                </div>
                                <div class="col-lg-5 pm">
                                    <input class="col-8" type="text" onblur="aa()" id="endDate" name="endDate"
                                           value=""/>
                                </div>
                            </div>

                            <div class="col-lg-2 pm">

                                记课：<select name="bbxb" id="sel" onblur="aa()">
                                <option selected="selected" value="-1">全部</option>
                                <option value="1">已记</option>
                                <option value="0">未记</option>
                            </select>

                            </div>
                            <div class="col-lg-1 pm">
                                <button class="button1">导出Excel</button>
                            </div>

                        </div>


                        <div class="row" >
                            <div id="top" style=" width: 100%;margin-left: 10px;">
                                <table id="table">
                                    <tr>
                                        <td width="300px"><input type="checkbox" id="quanxuan"></td>
                                        <td width="150" align="center">教师</td>
                                        <td width="150" align="center">班级</td>
                                        <td width="150" align="center">日期</td>
                                        <td width="150" style="padding: 10px;" align="right">记课</td>
                                    </tr>


                                </table>
                            </div>


                        </div>


                    </div>
                    <div style="width: 380px;height: 50px;margin: auto;padding: 5px" >
                        <p>
                            <input onclick="clic(1)" class="pag_But" type="button" value="首页" style="margin-left: -15px">
                            <input onclick="clic(dan()-1)" class="pag_But" type="button" value="上一页" style="margin-left: 12px">
                            &nbsp;&nbsp;&nbsp;<span id="pag_Show" >1</span>/<span id="pag_Show2"></span>
                            <input onclick="clic(dan()+1)" class="pag_But" type="button" value="下一页" style="margin-left: 12px">
                            <input onclick="clic(dangg())" class="pag_But" type="button" value="尾页" style="margin-left: 12px">
                        </p>
                    </div>

                </el-main>
            </div>
        </el-container>
    </el-container>
</div>


<script type="text/javascript">

    let shuzu = {};
    var Main = {};
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app');

    var v = location.search;
    var pos = v.indexOf('?');
    var uName = v.substr(pos);
    strs = uName.split("7")[1].split("%")[0]; //字符分割
    document.getElementById("admin_name").innerHTML = strs;

    //获取当前页并返回
    var dan=function (){
        return parseInt($("#pag_Show").html());
    }

    //获取尾页并返回
    var dangg=function (){
        return parseInt($("#pag_Show2").html());
    }

    var clic =function (dang){
        $("#pag_Show").html(dang);
        if(dang==0){
            alert("已经是第一页了！")
            dang=1;
            $("#pag_Show").html(dang);
        }

        if(dang>$("#pag_Show2").html()){
            alert("已经是最后一页了")
            dang=$("#pag_Show2").html();
            $("#pag_Show").html(dang);
        }
        aa(dang);

        datas = myAjax(shuzu, "./UserSelectAllServlet", go);

    }



    //获取班级并保存
    var cl;
    var clss = function (data) {

        cl = data;
        for (var j = 0; j < cl.length; j++) {
            //把数据库的值放到下拉框中
            var options = document.createElement("option");
            document.getElementById("classes").appendChild(options)
            options.value = cl[j].id;
            options.text = cl[j].className;
        }
    }

    //获取老师并保存
    var tna;
    var tea = function (data) {
        tna = data;

        for (var t = 0; t < tna.length; t++) {

            var option = document.createElement("option");
            document.getElementById("teacher").appendChild(option);
            option.value = tna[t].id;
            option.text = tna[t].teacherName;
        }

    }


    $(function () {
        var date = new Date();
        $("#startDate").val(date.getFullYear() + "-0" + (date.getMonth() + 1) + "-01");
        $("#endDate").val(date.getFullYear() + "-0" + (date.getMonth() + 1) + "-" + date.getDate());


         myAjax({}, "./ShowTeaServlet", tea);
         myAjax({}, "./ShowClassServlet", clss);
        //默认加载显示'

        aa(0);
        datas = myAjax(shuzu, "./UserSelectAllServlet", go);


    })

    $("select").change(function (){
        aa(0);
        datas = myAjax(shuzu, "./UserSelectAllServlet", go);
    })

    function aa(da){
        debugger
        shuzu["teacher"] = $("#teacher").val();
        shuzu["classes"] = $("#classes").val();
        shuzu["sel"] = $("#sel").val();
        shuzu["startDate"] = $("#startDate").val();
        shuzu["endDate"] = $("#endDate").val();
        shuzu["dang"]=da;


        $('#endDate').datetimepicker("hide")
        $('#startDate').datetimepicker("hide")
    }

    var go = function (data) {
            var datas=data.ja;
            $("#pag_Show2").html(data.zong);

        $("#table  tr:not(:first)").html("");//删除表格除头部意外的数据
        var str = "";
        for (var i = 0; i < datas.length; i++) {                     //传入要带参的值
            str = "<tr><td width='300px'>" + '<input type="checkbox" name="ri" id="qx" value="" />' + "</td><td width='150px' align='center'>" + datas[i].teacherName + "</td><td width='150px' align='center'>" + datas[i].className + "</td><td width='150px' align='center'>" + datas[i].dmy +
                "</td><td width='150px' style='padding: 10px;' align='right'>" + datas[i].mark + "</td><td style='display: none'>"+datas[i].aid+"</td></tr>";
            $("#table").append(str);
            $("tr:odd").attr("bgColor", "#fff");

        }


    }


    //全选按钮
    $("#quanxuan").click(function () { //给全选按钮加上点击事件
        var xz = $(this).prop("checked"); //判断全选按钮的选中状态
        // var ck = $("#qx").prop("checked", xz); //让class名为qx的选项的选中状态和全选按钮的选中状态一致。

        var n = $("input[name='ri']").prop("checked", xz);


    })


    $('#startDate').datetimepicker({
        format: 'YYYY-MM-DD',
        /*,此属性是显示顺序，还有显示顺序是mm-dd-yyyy*/
        // initialDate:new Date(),
        //  defaultDate:startTime,
        locale: 'zh-CN',
        ignoreReadonly: true,
        debug: true
    });

    $('#endDate').datetimepicker({
        format: 'YYYY-MM-DD',
        /*,此属性是显示顺序，还有显示顺序是mm-dd-yyyy*/
        //	  defaultDate:endTime,
        locale: 'zh-CN',
        ignoreReadonly: true,
        debug: true
    });


    function ss() {

        var ss = $("#startDate");
        alert($("#startDate").val())
    }
</script>

</body>


</html>
